<template>
  <section class="section">
    <aside class="aside">
      <div>
        <router-link to="/main">main</router-link>
      </div>
      <div>
        <router-link to="/vue3">vue3</router-link>
      </div>
      <div>
        <router-link to="/vue2">vue2</router-link>
      </div>
    </aside>
    <main class="main">
      <router-view></router-view>
    </main>
  </section>
</template>

<style>
.section {
  width: 100vw;
  height: 100vh;
  display: flex;
}

.aside {
  min-width: 200px;
  width: 200px;
  height: 100%;
  border: 1px solid #1890ff;
  padding: 20px;
}

.aside > div {
  height: 32px;
  line-height: 32px;
  margin: 10px;
}

.main {
  width: calc(100vw - 200px);
  height: 100%;
}
</style>
